/* Import bootstrap, but prefix it all with our grid div so we don't clobber our interactive windows styles */
#variable-explorer-data-grid {
    @import "bootstrap-less/bootstrap/bootstrap.less";
}

#variable-explorer-data-grid .form-control {
    height: auto;
    padding: 0px;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    border-radius: 0px;
}

#variable-explorer-data-grid .react-grid-Main {
    font-family: var(--vscode-font-family);
    background-color: var(--vscode-editor-background);
    color: var(--vscode-editor-foreground);
    outline: none;
}

#variable-explorer-data-grid .react-grid-Grid {
    background-color: var(--vscode-editor-background);
    color: var(--vscode-editor-foreground);
    border-style: none;
}

#variable-explorer-data-grid .react-grid-Canvas {
    background-color: var(--vscode-editor-background);
    color: var(--vscode-editor-foreground);
}

#variable-explorer-data-grid .react-grid-Header {
    background-color: var(--vscode-editor-background);
}

#variable-explorer-data-grid .react-grid-HeaderCell {
    background-color: var(--vscode-sideBar-background);
    color: var(--vscode-sideBar-foreground);
    font-family: var(--vscode-font-family);
    border-right: 1px solid var(--vscode-menu-border);
    padding-top: 0;
    padding-bottom: 0;
}

.react-grid-Header {
    box-shadow: none;
}

.react-grid-HeaderCell__draggable {
    cursor: ew-resize;
}

.react-grid-HeaderCell {
    border-bottom: none;
}

#variable-explorer-data-grid .react-grid-Row--even {
    background-color: var(--vscode-editor-background);
    color: var(--vscode-editor-foreground);
}

#variable-explorer-data-grid .react-grid-Row--odd {
    background-color: var(--vscode-sideBar-background);
    color: var(--vscode-sideBar-foreground);
}

#variable-explorer-data-grid .react-grid-Cell {
    background-color: transparent;
    color: var(--vscode-editor-foreground);
    border-style: none;
    padding-top: 0;
    padding-bottom: 0;
}

#variable-explorer-data-grid .react-grid-Cell:hover {
    background-color: var(--vscode-list-hoverBackground);
    color: var(--vscode-list-hoverForeground);
}

#variable-explorer-data-grid .react-grid-Row:hover {
    background-color: var(--vscode-list-hoverBackground);
    color: var(--vscode-list-hoverForeground);
}

#variable-explorer-data-grid .react-grid-Row:hover .react-grid-Cell {
    background-color: var(--vscode-list-hoverBackground);
    color: var(--vscode-list-hoverForeground);
}

#variable-explorer-data-grid .rdg-selected {
    visibility: hidden;
}

// High contrast theme changes

// Notifications-background and line-highlight-border don't work in high contrast mode, so skip the header color in high contrast themes
body.vscode-high-contrast #variable-explorer-data-grid .react-grid-Header {
    background-color: var(--vscode-editor-background);
    border-color: var(--vscode-editor-foreground);
}

body.vscode-high-contrast #variable-explorer-data-grid .react-grid-HeaderCell {
    background-color: var(--vscode-editor-background);
}

body.vscode-high-contrast #variable-explorer-data-grid .react-grid-Row--odd {
    background-color: var(--vscode-editor-background);
    border-color: var(--vscode-editor-foreground);
}

// Since we have removed zebra striping in HC mode, add back in grid lines
body.vscode-high-contrast #variable-explorer-data-grid .react-grid-Cell {
    border-style: solid;
    border-width: 1px;
    border-color: var(--vscode-editor-foreground);
}


// HC inverts selection colors, so use the selection foreground color on hover
body.vscode-high-contrast #variable-explorer-data-grid .react-grid-Cell:hover {
    color: var(--vscode-editor-foreground);
    filter: opacity(70%);
}

body.vscode-high-contrast #variable-explorer-data-grid .react-grid-Row:hover {
    color: var(--vscode-editor-foreground);
    filter: opacity(70%);
}

body.vscode-high-contrast #variable-explorer-data-grid .react-grid-Row:hover > * {
    color: var(--vscode-editor-foreground);
}
